<template>
    <div>
        <!-- 头部 start -->
		<div class="header w1210 bc mt15">
			<!-- 头部上半部分 start 包括 logo、搜索、用户中心和购物车结算 -->
			<div class="logo w1210">
				<h1 class="fl"><a href="index.html"><img src="~/assets/images/logo.png" alt="京西商城"></a></h1>
				<!-- 头部搜索 start -->
				<div class="search fl">
					<div class="search_form">
						<div class="form_left fl"></div>
						<form action="" name="serarch" method="get" class="fl">
							<input type="text" v-model="keyword" @keydown.enter="searchList" class="txt" value="请输入商品关键字" /><input type="submit" @click.prevent="searchList" class="btn" value="搜索" />
						</form>
						<div class="form_right fl"></div>
					</div>

					<div style="clear:both;"></div>

					<div class="hot_search">
						<strong>热门搜索:</strong>
						<a href="">D-Link无线路由</a>
						<a href="">休闲男鞋</a>
						<a href="">TCL空调</a>
						<a href="">耐克篮球鞋</a>
					</div>
				</div>
				<!-- 头部搜索 end -->

				<!-- 用户中心 start-->
				<div class="user fl">
					<dl>
						<dt>
							<em></em>
							<a href="">用户中心</a>
							<b></b>
						</dt>
						<dd>
							<div class="prompt">
								您好，请<a href="">登录</a>
							</div>
							<div class="uclist mt10">
								<ul class="list1 fl">
									<li><a href="">用户信息></a></li>
									<li><a href="">我的订单></a></li>
									<li><a href="">收货地址></a></li>
									<li><a href="">我的收藏></a></li>
								</ul>

								<ul class="fl">
									<li><a href="">我的留言></a></li>
									<li><a href="">我的红包></a></li>
									<li><a href="">我的评论></a></li>
									<li><a href="">资金管理></a></li>
								</ul>

							</div>
							<div style="clear:both;"></div>
							<div class="viewlist mt10">
								<h3>最近浏览的商品：</h3>
								<ul>
									<li><a href=""><img src="~/assets/images/view_list1.jpg" alt="" /></a></li>
									<li><a href=""><img src="~/assets/images/view_list2.jpg" alt="" /></a></li>
									<li><a href=""><img src="~/assets/images/view_list3.jpg" alt="" /></a></li>
								</ul>
							</div>
						</dd>
					</dl>
				</div>
				<!-- 用户中心 end-->

				<!-- 购物车 start -->
				<div class="cart fl">
					<dl>
						<dt>
							<a href="">去购物车结算</a>
							<b></b>
						</dt>
						<dd>
							<div class="prompt">
								购物车中还没有商品，赶紧选购吧！
							</div>
						</dd>
					</dl>
				</div>
				<!-- 购物车 end -->
			</div>
			<!-- 头部上半部分 end -->

			<div style="clear:both;"></div>

			<!-- 导航条部分 start -->
			<div class="nav w1210 bc mt10">
				<!--  商品分类部分 start-->
				<div :class="'category fl '+ cat1State">
					<!-- 非首页，需要添加cat1类 -->
					<div :class="'cat_hd '+catState">
						<!-- 注意，首页在此div上只需要添加cat_hd类，非首页，默认收缩分类时添加上off类，鼠标滑过时展开菜单则将off类换成on类 -->
						<h2>全部商品分类</h2>
						<em></em>
					</div>

					<div class="cat_bd">

						<div v-for="(v,k) in catList" :key="k" class="cat item1">
							<h3><a href="">{{v.cat_name}}</a> <b></b></h3>
							<div class="cat_detail">
								<dl v-for="(v1,k1) in v.children" :key="k1" class="dl_1st">
									<dt><a href="">{{v1.cat_name}}</a></dt>
									<dd>
										<a v-for="(v2,k2) in v1.children" :key="k2" href="">{{v2.cat_name}}</a>
									</dd>
								</dl>
							</div>
						</div>

					</div>

				</div>
				<!--  商品分类部分 end-->

				<!-- <top2-nav></top2-nav> -->
				<div class="navitems fl">
					<ul class="fl">
						<router-link active-class="current" exact tag="li" to="/"><a>首页</a></router-link>  
						<!-- <li class="current"><router-link to="/"><a href="#">首页</a></router-link></li> -->
						<li><a href="">电脑频道</a></li>
						<li><a href="">家用电器</a></li>
						<li><a href="">品牌大全</a></li>
						<router-link active-class="current" tag="li" to="/seckill"><a>团购</a></router-link>  
						<li><a href="">积分商城</a></li>
						<li><a href="seckill-index.html">夺宝奇兵</a></li>
					</ul>
					<div class="right_corner fl"></div>
				</div>
			</div>
			<!-- 导航条部分 end -->
		</div>
		<!-- 头部 end-->
    </div>
</template>

<script>
import indexApi from '~/api/index.js'

export default {
    data(){
        return{
            catList: [],
            //搜索关键词key
            keyword:'',
			catState:'off',
			cat1State:''
        }
    },
    created(){
       this.showCategorys()
    },
    methods:{
        //搜索跳转方法
		//把关键词存储到localSession
		//跳转搜索列表页面
		searchList:function(){
			//把关键词存储到SessionStorage
			sessionStorage.setItem("keyword",this.keyword);
			//跳转到搜索列表页面 TODO 需要携带参数
			this.$router.push('/search')
			// location.href="list.html";
		},
		logout:function(){
			//清空localStorage
			localStorage.removeItem("token");
			localStorage.removeItem("name"); 
			//跳转到登录页面
			location.href="login.html";
		},
		showCategorys(){
			indexApi.showCategorys().then(res=>{
				// console.log(res.data.data)
				('加载左侧菜单数据')
				this.catList = res.data.data;
			})
		}
	
    },
    updated: function () {
		//导航菜单效果
		$(".cat").hover(function () {
			$(this).find(".cat_detail").show();
			$(this).find("h3").addClass("on");
		}, function () {
			$(this).find(".cat_detail").hide();
			$(this).find("h3").removeClass("on");
		});
		//搜索框，注意此处，获取文本框的默认值使用defaultValue属性，但是只能通过this.defaultValue，不能使用$(this).defalutValue。
		$(".search_form .txt").focus(function(){
			if ($(this).val() == this.defaultValue){
				$(this).val("").css({color:"#333"});
			}	
		}).blur(function(){
			if ($(this).val() == ""){
				$(this).val(this.defaultValue).css({color:"#999"});
			}
		});
		//头部用户
		$(".user").mouseover(function(){
			$(this).find("dd").show();
			$(this).find("dt").addClass("on");
		}).mouseout(function(){
			$(this).find("dd").hide();
			$(this).find("dt").removeClass("on");
		});

		//购物车
		$(".cart").mouseover(function(){
			$(this).find("dd").show();
			$(this).find("dt").addClass("on");
		}).mouseout(function(){
			$(this).find("dd").hide();
			$(this).find("dt").removeClass("on");
		});

		//导航菜单效果
		$(".cat").hover(function(){
			$(this).find(".cat_detail").show();
			$(this).find("h3").addClass("on");
		},function(){
			$(this).find(".cat_detail").hide();
			$(this).find("h3").removeClass("on");
		});

		//非首页，导航菜单显隐效果
		$(".cat1").hover(function(){
			$(".cat1 .cat_hd").addClass("on").removeClass("off");
			$(".cat1 .cat_bd").show();
		},function(){
			$(".cat1 .cat_hd").addClass("off").removeClass("on");
			$(".cat1 .cat_bd").hide();
		});
	},
	mounted(){
		//判断当前页面 是否需要将菜单展开
		console.log(this.$route)
		// alert(this.$route.name=='index')
		if(this.$route.name=='index'){
			this.catState = 'on'
			console.log('index')
		}else{
			console.log('other')
			this.catState = 'off'
			this.cat1State = 'cat1'
			$(".cat_bd").hide();
			console.log(this.catState)
		}
	}
}
</script>

<style>

</style>
